/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  /* 1. 父级`display: flex` + 子级`margin: auto` 不限定宽高 */
  /* display: grid(父级) 不限定宽高  */
  .center-grid {
    display: grid;
    justify-content: center;
    align-items: center;
  }

  /* 
  限定宽高-绝对定位(或+ calc())
    1.position: absolute   top: 50%;left: 50%;   margin-top: -16px;margin-left: -72px;
    2.position: absolute;  top: calc(50% - 16px);left: calc(50% - 72px);
  */
  /* 不限定宽高 绝对定位+translate */
  .center-translate {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 不限定宽高 1.仿table布局 display: table/table-cell; 2.伪元素设置行内并使用 vertical-align*/
  /* 
    使用vertical-align实现居中时，居中元素display的值，必须为inline-block/inline，否则无法垂直
    居中，这是因为vertical-align只能用来指定行内元素（inline）或表格单元格（table-cell）
    元素的垂直对齐方式。
   */
  .center-inline {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }

  .center-inline-block::after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

@layer components {
  code.code {
    @apply ml-2 mr-2 pl-2 pr-2 text-red-700 bg-red-200 rounded;
  }

  /* dialog */
  .modal-mask {
    background-color: rgba(0, 0, 0, .45);
    z-index: 1000;
    @apply fixed inset-0 h-full;
  }

  .modal-wrap {
    z-index: 1000;
    @apply fixed inset-0 h-full overflow-auto outline-none;
  }
}

@layer utilities {
  .tip.warning:before {
    background-color: #f66;
    border-radius: 100%;
    color: #fff;
    content: "!";
    font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    left: -12px;
    line-height: 20px;
    position: absolute;
    height: 20px;
    width: 20px;
    text-align: center;
    top: 10px;
  }

  .input-trick {
    display: block;
    width: 229px;
    padding: .8em;
    outline: none;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
  }

  .input-trick:focus,
  .input-trick:hover {
    border-color: #b4a078;
  }

  .input-trick:not(:placeholder-shown) {
    border-color: #be4141;
    box-shadow: 0 0 0 2px rgba(255, 100, 97, 0.2);
  }

  .input-trick:not(:placeholder-shown)+.info {
    color: #be4141;
  }

  .input-trick:valid {
    border-color: #b4a078;
    box-shadow: 0 0 0 2px rgba(180, 160, 120, 0.2);
  }

  .input-trick:valid+.info {
    color: unset;
  }

  /* focus 状态表示是否显示info信息 */
  .input-animation:not(:focus)+.info {
    transform: scale(0);
    animation: elastic-dec .25s;
  }

  .input-animation:focus+.info {
    transform: scale(1);
    animation: elastic-grow .45s;
  }

  .input-cubic-bezier:not(:focus)+.info {
    transform: scale(0);
    transition: transform .25s cubic-bezier(.25, .1, .25, .1);
  }

  .input-cubic-bezier:focus+.info {
    transform: scale(1);
    transition: transform .4s cubic-bezier(.29, .15, .5, 1.46);
  }

  /* info样式 */
  .input-trick+.info {
    display: inline-block;
    width: 236px;
    font-size: 13px;
    padding: .6em;
    background: #fafafa;
    position: relative;
    margin-left: -3px;
    margin-top: 3px;
    border-radius: 2px;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .23456));
    transform-origin: 15px -6px;
  }

  .input-trick+.info::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 10px;
    border: 9px solid transparent;
    border-bottom-color: #fafafa;
    border-top-width: 0;
  }

  @keyframes elastic-grow {
    from {
      transform: scale(0);
    }

    70% {
      transform: scale(1.1);
      animation-timing-function: cubic-bezier(.1, .25, .1, .25);
    }
  }

  @keyframes elastic-dec {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(0);
      animation-timing-function: cubic-bezier(.25, .1, .25, .1);
    }
  }
}


/* html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
} */